<template>
    <div id="rotation">
        <van-swipe class="my-swipe" :autoplay="3000" :stop-propagation='true' :touchable='true'	>
            <van-swipe-item>
                <img :src="rotation1" alt="">
            </van-swipe-item>
            <van-swipe-item><img :src="rotation2" alt=""></van-swipe-item>
            <van-swipe-item><img :src="rotation3" alt=""></van-swipe-item>
            <van-swipe-item><img :src="rotation4" alt=""></van-swipe-item>
            <van-swipe-item><img :src="rotation5" alt=""></van-swipe-item>
        </van-swipe>
    </div>
</template>
<script>
export default {
    name: "Rotation",
    data() {
        return {
            rotation1: '',
             rotation2: '',
              rotation3: '',
               rotation4: '',
                rotation5: '',
            
            
        };
    },
    created() {
        this.axios.get("data/rotation-hart.json").then(res => {
            this.rotation1 = res.data[0].path
            this.rotation2 = res.data[1].path
            this.rotation3 = res.data[2].path
            this.rotation4 = res.data[3].path
            this.rotation5 = res.data[4].path
            
            
        });
    }
   
    
   
};
</script>
<style scoped>

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    /* line-height: 150px; */
    text-align: center;
    background-color: #39a9ed;
}
img{
    width: 100%;
    height: 100%;
}

</style>